import { AfterViewInit, Component, ElementRef, OnDestroy, OnInit, ViewChild } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { MessageService } from 'primeng/api';
import { CellType, CommandType } from '../enums';
import { PiplineConifg, ScenarioConfig, SiteNodeConfig, SrmConfig } from '../models';
import { MonitorGraphUtilService } from '../services/monitor-graph-util.service';
import { ScenarioMonitorService } from '../services/scenario-monitor.service';
import { ScenarioService } from '../services/scenario.service';
import { PiplineSidebarComponent } from './pipline-sidebar/pipline-sidebar.component';
import { PlcSidebarComponent } from './plc-sidebar/plc-sidebar.component';
import { SiteSidebarComponent } from './site-sidebar/site-sidebar.component';
import { SrmSidebarComponent } from './srm-sidebar/srm-sidebar.component';
import { Subscription } from 'rxjs';
import { ScenarioTaskComponent } from './scenario-task/scenario-task.component';

@Component({
  selector: 'app-scenario-monitor',
  templateUrl: './scenario-monitor.component.html',
  styleUrl: './scenario-monitor.component.scss',
  providers: [MonitorGraphUtilService, ScenarioMonitorService]
})
export class ScenarioMonitorComponent implements OnInit, AfterViewInit, OnDestroy {
  scenario!: ScenarioConfig;
  @ViewChild("graphContainer", { static: true })
  graphContainer!: ElementRef;
  @ViewChild("plcSidebar", { static: true })
  plcSidebar!: PlcSidebarComponent;
  @ViewChild("piplineSidebar", { static: true })
  piplineSidebar!: PiplineSidebarComponent;
  @ViewChild("siteSidebar", { static: true })
  siteSidebar!: SiteSidebarComponent;
  @ViewChild("srmSidebar", { static: true })
  srmSidebar!: SrmSidebarComponent;
  @ViewChild("scenarioTask", { static: true })
  scenarioTask!: ScenarioTaskComponent;


  sidebarLeftVisible: boolean = false;
  cmdSubscribe?: Subscription;
  fieldUpdateSubscribe?: Subscription;

  get leftSidebarButtonIcon() {
    return this.plcSidebar.isOpen ? 'pi pi-chevron-left' : 'pi pi-chevron-right';
  }

  constructor(private route: ActivatedRoute,
    private service: ScenarioService,
    private monitor: ScenarioMonitorService,
    private util: MonitorGraphUtilService,
    private messageService: MessageService
  ) {

  }

  ngOnInit(): void {
    this.cmdSubscribe = this.monitor.onCmd.subscribe(cmd => {
      this.messageService.add({ severity: 'warn', summary: cmd.Type, detail: cmd.Message });
      switch (cmd.Type) {
        case CommandType.Load:

          break;
        case CommandType.Unload:
          break;
        case CommandType.Start:
          break;
        case CommandType.Stop:
          break;
      }
    });
    this.fieldUpdateSubscribe = this.monitor.onFieldUpdated.subscribe(data => {
      // console.log(data);
      // this.util.onFieldUpdated(data);
      this.siteSidebar.notifyFieldUpdated(data);
    });
  }

  ngOnDestroy(): void {
    this.cmdSubscribe?.unsubscribe();
    this.fieldUpdateSubscribe?.unsubscribe();
  }


  ngAfterViewInit(): void {

    this.route.params.subscribe(params => {
      const { id } = params;
      this.service.get(id).subscribe(item => {
        this.scenario = item;
        // const util = new MonitorGraphUtil(this.graphConfigService, this.metaService);
        this.util.Init(this.graphContainer.nativeElement);

        this.util.loadScenario(item);

        this.util.nodeselected.subscribe((node) => {
          // console.log("nodeselected");
        });

        this.util.cellselected.subscribe((cfg) => {
          switch (cfg?.Type) {
            case CellType.Pipline:
              const pipline = cfg as PiplineConifg;
              this.piplineSidebar.onShow(pipline);
              break;
            case CellType.Site:
              const site = cfg as SiteNodeConfig;
              this.siteSidebar.onShow(site);
              break;
            case CellType.Srm:
              const srm = cfg as SrmConfig;
              this.srmSidebar.onShow(srm);
              break;
          }
        });
      });
    });

  }

  onToggleLeftSidebar() {
    // this.leftSidebarVisible = true;
    this.plcSidebar.toggle();

  }

  onSidebarHide() {
    this.util.loadScenario(this.scenario);
  }

  onLoadClick() {
    this.monitor.load(this.scenario.Id!);
  }
  onUnloadClick() {
    this.monitor.unload();
  }
  onStartClick() {
    this.monitor.start();
  }
  onStopClick() {
    this.monitor.stop();
  }
}
